<template>
  <div class="footer">
    <span>{{ total }}</span>
    <button @click="showDone">完成</button>
    <button @click="showUndone">未完成</button>
    <button @click="showAll">全部</button>
    <button @click="clearAll">清除全部</button>
  </div>
</template>

<script>
export default {
  name: 'todoFooter',
  props: {
    total: {
      type: Number,
      default: () => (0),
    },
  },
  methods: {
    showDone() {
      // this.$emit('showDone');
    },
    showUndone() {
      // this.$emit('showUndone');
    },
    showAll() {
      // this.$emit('showAll');
    },
    clearAll() {
      this.$emit('clearAll');
    },
  },
};
</script>

<style scoped>
.footer {
  color: #333;
  display: flex;
  align-items: center;
  gap: 1rem;
}
</style>